<template>
  <div class="search-bar">
    <div class="searh-bar-wrapper">
      <van-icon class="search" name="search" size="16px" color="#858c96"></van-icon>
      <input 
        class="search-bar-input"
        :focus="focus"
        :desabled="desabled"
        :maxlength="limit"
        :placeholder="hotSearch.length === 0 ? '搜索' : hotSearch"
        v-model="searchWord"
        @click="onChange"
        confirm-type="search"
        @confirm = "onConfirm"
        placeholder-style="color: #ADB4BE; font-size: 15px"
      />
      <van-icon class="clear" name="clear" size="16px" color="#858c96" @click="onClearClick" 
        v-if="searchWord.length > 0"
      
      
      
      ></van-icon>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        focus:{
            type:Boolean,
            default:false
        },
        desabled:{
            type:Boolean,
            default:false
        },
        limit:{
            type:Number,
            default:50
        },
        hotSearch:{
            type:String,
            default:""
        }
    },
  data() {
    return {
            searchWord:''

    };
  },

    //方法
    methods:{
        //搜索框点击事件
        onSearchBarClick(){
            this.$emit('onClick')
        },
        //点击清空事件
        onClearClick(){
            this.searchWord =''
            this.$emit=('onClear')
        },
        //输入监听事件
        onChange(e){
            const{value} = e.mp.detail
            this.$emit('onChange', value)
        },
        //点击虚拟键盘搜索事件
        onConfirm(e){
            const{value} = e.mp.detail
            this.$emit('onConfirm', value)
        },
        //对输入框关键字赋值
        setValue(v){
            this.searchWord = v
        },
        //获取输入框的关键字
        getValue(){
            return this.searchWord
        },
    },


  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
    .search-bar{
        padding:  15px 15.5px;
        .searh-bar-wrapper{
            display: flex;
            height: 40px;
            box-sizing: border-box;
            align-items: center;
            background: #F5F7F9;
            border-radius: 20px;
            padding: 12px 17px;
            .search-bar-input{
                flex:1;
                margin: 0 8px;
            }
            .search .clear{
                display:flex;
                align-items: center;
                height: 100%;
            }
            
        } 
    }
</style>